<template>
  <div 
     :class="{'block-look-edit-toggle':true,'active':isDefaultActive?true:active}" 
     @mouseenter="mouseToggle($event)"     
     @mouseleave="mouseToggle($event)">
     <el-row>
        <el-col :span="23" class="content">
            <slot name="content"></slot>
            <div class="btn-list" v-if="isDefaultActive?true:showBtn">
              <el-button type="primary" @click="saveClick">保存</el-button>
              <el-button type="primary" plain @click="cancelClick" v-if="isDefaultActive?false:edit">取消</el-button>
            </div>
        </el-col>
        <el-col :span="1" class="edit-btn">
           <span v-if="isDefaultActive?false:edit&&showEdit" @click="editClick">编辑</span>
        </el-col>
      </el-row>
  </div>
</template>
<script>
export default {
  name: 'BlockLookEditToggle',
  props: {
    //是否启用鼠标经过事件
    activeMouse:{
      type:Boolean,
      default: true
    },
    //是否为编辑模式，若为新增模式不需要编辑按钮
    edit:{
      type:Boolean,
      default: true
    },
    //是否默认为高亮状态
    isDefaultActive:{
      type:Boolean,
      default: false
    }
  },
  data () {
    return {
      showBtn:false,
      showEdit:false,
      active:false
    }
  },
  methods: {
    mouseToggle(event){
      if((!this.activeMouse) || this.isDefaultActive) return;
      if(this.edit){//编辑模式
         if(event.type==="mouseenter"){
           this.showEdit = !this.showBtn ? true : false;
           this.active = true;
         }else{
           this.showEdit = false;
           this.active = this.showBtn ? true:false;
         }
      }else{//新增模式
        if(event.type==="mouseenter"){
          this.showBtn = true ;
          this.active = true ;
        }else{
          this.showBtn = false ;
          this.active = false ;
        }
        
      }
      this.$emit(event.type,{
        showBtn:this.showBtn
      });
    },
   editClick(){
     this.showBtn = true;
     this.$emit('editClick')
   },
   inactive(){
     this.showEdit = false;
     this.active = false;
     this.showBtn = false;
   },
   cancelClick(){
     this.inactive();
     this.$emit('cancelClick');
   },
   saveClick(){
     this.$emit('saveClick')
   }

  },
}
</script>
<style lang="scss">
   .block-look-edit-toggle{
     &.active{
       border:1px solid #004a86 ;
       padding:20px;
     }
     .edit-btn{
       line-height: 40px;
       color: #004a86;
       text-align:right;
       cursor: pointer;
     }
     .btn-list{
       padding-left: 50px;
     }
   }
</style>
